<template>
    <view class="form-main">

        <uni-forms ref="formObj" :modelValue="formData" label-position="top" :rules="rules">
            <uni-forms-item label="姓名" name="name">
                <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
            </uni-forms-item>
            <uni-forms-item label="电话" name="phone">
                <uni-easyinput type="text" v-model="formData.phone" placeholder="请输入电话" />
            </uni-forms-item>
            <uni-forms-item label="收件地址" name="address">
                <uni-easyinput type="text" v-model="formData.address" placeholder="请输入收件地址" />
            </uni-forms-item>
            <uni-forms-item label="" name="freight" style="margin-top: -30px;">
                <text>运费：{{ formData.freight }}</text>
            </uni-forms-item>
            <uni-forms-item label="备注" name="remarks">
                <uni-easyinput type="text" v-model="formData.remarks" placeholder="请输入收件地址" />
            </uni-forms-item>
            <uni-forms-item label="" name="payMoney" style="margin-top: -30px;">
                <text>金额：{{ formData.payMoney }}</text>
            </uni-forms-item>
            <button @click="submitForm">支付</button>
        </uni-forms>

    </view>

</template>

<script lang="ts" setup>

import { ref } from "vue";

// 表单引用
const formObj = ref()
// 表单数据
const formData = ref({
    name: '张三',
    phone: '',
    address: 'dsfsfdf',
    remarks:'',
    freight:0.00,
    payMoney:0.00
})

// 表单规则
const rules = ref(
    {
        // 对name字段进行必填验证
        name: {
            // name 字段的校验规则
            rules: [
                // 校验 name 不能为空
                {
                    required: true,
                    errorMessage: '请输入姓名',
                },
                // 对name字段进行长度验证
                // {
                //     minLength: 2,
                //     maxLength: 5,
                //     errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
                // }
            ],
            // 当前表单域的字段中文名，可不填写
            label: '姓名',
            validateTrigger: 'submit'
        },
        phone: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入电话',
                }
            ],
            label: '电话',
            validateTrigger: 'submit'
        },
        address: {
            rules: [
                {
                    required: true,
                    errorMessage: '请输入收件地址',
                }
            ],
            label: '收件地址',
            validateTrigger: 'submit'
        }
    }
)

function submitForm() {

    // console.log('表单数据信息：', formData.value);

    formObj.value.validate().then(res => {
        console.log('表单数据信息：', res);
    }).catch(err => {
        console.log('表单错误信息：', err);
    })
}


</script>

<style lang="less" scoped>
.form-main {
    margin: 0 12px;
}
</style>